<template>
  <view class="file_row">
    <view v-if="loading" class="file_loading">
      <u-loading mode="flower" size="48" />
      <text>正在请求数据...</text>
    </view>
    <view
      v-for="(item, i) in fileList"
      :key="i"
      class="file_item animate__animated animate__slideInUp"
      @click="fileClick(item.file)"
    >
      <u-icon
        class="file_icon"
        :name="getIcon(item.file)"
      />
      <view class="file_name">
        {{
          item.file.name
        }}
      </view>
    </view>

    <MyAction ref="action" @itemClick="actionClick" />
  </view>
</template>

<script>
import MyAction from '@/components/shufei-action/action.vue';
import { fileView, downFile } from '@/utils/files';
import { Message } from '@/utils/utils';

const getFileName = (file) => {
  return file.name.split(/\.(?=[^.]*$)/);
};

export default {
  name: 'MyFileRow',

  components: { MyAction },

  props: {
    fileList: {
      type: Array,
      default: () => [] // {file: File}
    },

    loading: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      currentFile: {},
      fileIcon: Object.freeze({
        doc: require('@/static/img/task/icon-doc.png'),
        jp: require('@/static/img/task/icon-jpg.png'),
        png: require('@/static/img/task/icon-png.png'),
        xls: require('@/static/img/task/icon-xls.png')
      })
    };
  },

  methods: {
    fileClick(file) {
      this.$emit('fileClick', file);
      if (file.id) {
        this.openAction(file);
      } else {
        Message(getFileName(file)[0] + ', 是本地文件， 请在本地操作');
      }
    },

    openAction(file) {
      this.currentFile = file;
      const fileNameGroup = getFileName(file);
      const fileName = fileNameGroup[0];
      const name = fileName.length > 15 ? fileName.slice(0, 15) + '...' : fileName;
      this.$refs.action.actionConfig = {
        title: name + ' .' + fileNameGroup[1],
        // summary: '说明',
        type: 'fileClick',
        list: [
          { title: '预览', color: '#333333' },
          { title: '下载', color: '#333333' }
        ],
        // cancelColor: '#FF3D45',
        isBorderColor: true,
        specClass: 'show'
      };
    },

    getIcon(file) {
      const fileIcon = this.fileIcon;
      const splitName = file.name.split('.');
      const type = splitName[splitName.length - 1];
      const key = Object.keys(fileIcon).find(key => {
        const flag = new RegExp(key).test(type);
        return flag;
      });

      if (key) {
        return fileIcon[key];
      } else {
        return 'question-circle';
      }
    },

    actionClick(v, type) {
      if (type === 'fileClick') {
        const { id, originName: saveName } = this.currentFile;
        // v 0 预览 1 下载
        if (v === 0) {
          fileView(id);
        }

        if (v === 1) {
          downFile({
            saveName,
            id
          });
        }
      }
    }

  }
};
</script>

<style lang="scss" scoped>
.file_row {
  .file_loading {
    color: #606266;
    display: flex;
    align-items: center;
    > text {
      margin-left: 10px;
    }
  }
  .file_item {
    font-size: 15px;
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .file_icon {
      margin-right: 8px;
      width: 24px;
      height: 24px;
    }

    .file_name {
      width: calc(100vw - 76px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

</style>
